<template>
  <div class="content-wrapper">
    <div class="main-title">科技创新驱动打造天翼全栈云能力</div>
    <div class="main-sub-title">
      <span class="f-primary">云改数转</span>战略为引领；<span class="f-primary">科技创新</span>为驱动，通过<span class="f-primary">一体两翼+两大支撑体系</span>，打造<span class="f-primary">云-网-端-边-用-智-安</span>深度融合的天翼云全栈技术体系
    </div>
    <div class="main-wrapper text-center pt-30">
      <img src="@/assets/images/h-img1.png" />
      <img class="text1" src="@/assets/images/h-text1.png" />
      <img class="text2" src="@/assets/images/h-text2.png" />
      <img class="text3" src="@/assets/images/h-text3.png" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index'
  }
</script>

<style scoped lang="scss">
.main-wrapper{
  position: relative;
  .text1{
    position: absolute;
    left: 90px;
    top: 90px;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
  }
  .text2{
    position: absolute;
    right: 90px;
    top: 90px;
    animation: fadein 3s;
    -moz-animation: fadein 3s;
    -webkit-animation: fadein 3s;
    -o-animation: fadein 3s;
  }
  .text3{
    position: absolute;
    right: 110px;
    bottom: 10px;
    animation: fadein 4s;
    -moz-animation: fadein 4s;
    -webkit-animation: fadein 4s;
    -o-animation: fadein 4s;
  }
  @keyframes fadein {
    from {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }
  /*height: 100vh;*/
}
</style>
